import { cn } from '@/lib/utils';

type CategoryLite = { id: string; name: string };

export function SidebarServer({ categories }: { categories: CategoryLite[] }) {
  const firstId = categories?.[0]?.id;
  return (
    <aside className="hidden lg:block w-[220px] border-r border-border bg-sidebar overflow-y-auto">
      <nav className="p-3 space-y-1">
        {categories?.map((category) => (
          <a
            key={category.id}
            href={`#${category.id}`}
            className={cn(
              'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors',
              category.id === firstId
                ? 'bg-primary/10 text-primary font-medium'
                : 'text-sidebar-foreground hover:bg-sidebar-accent'
            )}
          >
            <span className="flex-1 text-left">{category.name}</span>
          </a>
        ))}
      </nav>
    </aside>
  );
}